<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="layout"
      th:with="activeNav='datacount'">
<head>
    <meta charset="UTF-8">
    <title>MACALLINE</title>
</head>
<body>
<div layout:fragment="content">
    <!-- END PAGE HEAD-->
    <!-- BEGIN PAGE BREADCRUMB -->
    <section class="content-header">
        <h1>
            数据统计
        </h1>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <!-- BEGIN EXAMPLE TABLE PORTLET-->
                <div class="portlet light bordered" style="width:auto;">
                    <div class="portlet-body">
                        <div class="table-toolbar">
                            <form class="form-horizontal" method="post" id="filter_form">
                                <div class="form-body">
                                    <div class="form-group">
                                        <label class="col-sm-1 control-label" style="width: 10%">Banner ID</label>
                                        <div class="col-sm-2">
                                            <input type="text" class="form-control" name="bannerId" id="bannerId"
                                                   onkeyup="value=value.replace(/[^\d]/g,'')"/>
                                        </div>
                                        <label class="col-sm-1 control-label" style="width: 12%">Banner 名称</label>
                                        <div class="col-sm-2">
                                            <input type="text" class="form-control" name="bannerName" id="bannerName"
                                                   onkeyup="value=value.replace(/[ ]/g,'')"/>
                                        </div>
                                        <label class="col-sm-1 control-label" style="width: 10%">状态</label>
                                        <div class="col-sm-2">
                                            <select class="form-control" name="status" id="status">
                                                <option value="">--全部--</option>
                                                <option value="0">待上架</option>
                                                <option value="1">已上架</option>
                                                <option value="2">已下架</option>
                                                <option value="3">已失效</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-1 control-label" style="width: 10%">所属商场</label>
                                        <div class="col-sm-2">
                                            <!-- <input type="text" class="form-control" name="mallName" id="mallName"/> -->
                                            <select class="form-control select2 select2-hidden-accessible"
                                                    name="mallCode" id="mallCode" tabindex="-1" aria-hidden="true">
                                                <option value="-1">--全部--</option>
                                                <option value="0">--集团--</option>
                                                <option th:each="mall : ${mallList}" th:value="${mall.mallCode}"><span
                                                        th:text="${mall.mallName}">组一</span></option>
                                            </select>
                                        </div>
                                        <label class="col-sm-1 control-label" style="width: 12%">Banner 时间</label>
                                        <div class="col-sm-2">
                                            <div class="input-group" data-date-format="yyyy-mm-dd">
                                                <input type="text" size="16"
                                                       class="form-control form_datetime_start_self" id="startTime"
                                                       name="startTime">
                                                <span class="input-group-btn">
                                                <button class="btn default date-set" type="button">
                                                    <i class="fa fa-calendar"></i>
                                                </button>
                                            </span>
                                            </div>
                                        </div>
                                        <label class="col-sm-1 control-label"
                                               style="margin-left: -6%;margin-right: -15px">至</label>
                                        <div class="col-sm-2">
                                            <div class="input-group" data-date-format="yyyy-mm-dd">
                                                <input type="text" size="16" class="form-control form_datetime_end_self"
                                                       id="endTime"
                                                       name="endTime">
                                                <span class="input-group-btn">
                                                <button class="btn default date-set" type="button">
                                                    <i class="fa fa-calendar"></i>
                                                </button>
                                            </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-1 control-label"></label>
                                        <div class="col-md-1" style="float: right;width: auto">
                                            <div style="float: right;margin-right: 5px">
                                                <button type="button"
                                                        class="btn yellow"
                                                        id="explore-button"
                                                        onclick="explore()">导出 <i class="fa  fa-cloud-download"></i>
                                                </button>
                                            </div>
                                            <div style="float: right;margin-right: 5px">
                                                <button type="button" style="margin-right: 1px" class="btn default"
                                                        onclick="resetForm()">重置
                                                    <i class="fa fa-gavel"></i>
                                                </button>
                                            </div>
                                            <div style="width: auto;float: right;margin-right: 5px">
                                                <button type="button"
                                                        class="btn btn-block btn-danger"
                                                        id="search-button">查询 <i class="fa fa-search"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div id="sample_1_wrapper" class="dataTables_wrapper no-footer" style="margin-top: -50px;">
                            <table class="table table-striped table-bordered table-hover" id="initTables"
                                   style="word-break:break-all;" width="100%">
                                <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>Banner ID</th>
                                    <th>Banner 名称</th>
                                    <th>所属商场</th>
                                    <th>Banner 时间</th>
                                    <th>状态</th>
                                    <th>Banner PV</th>
                                    <th>Banner UV</th>
                                </tr>
                                </thead>
                            </table>
                            <!--</div>-->
                        </div>
                    </div>
                </div>
                <!-- END EXAMPLE TABLE PORTLET-->
            </div>
        </div>

        <script th:inline="javascript">
            var table;
            $(function () {
                var columns = [
                    {data: "id", sortable: false},
                    {data: "bannerId"},
                    {data: "bannerName"},
                    {data: "mallName"},
                    {
                        data: "startTime",
                        render: function (data, type, row) {
                            var bannerTime = "";
                            var startTime;
                            var endTime;
                            if (row.startTime) {
                                startTime = (new Date(row.startTime)).Format("yyyy-MM-dd");
                            } else {
                                startTime = "";
                            }
                            if (row.endTime) {
                                endTime = (new Date(row.endTime)).Format("yyyy-MM-dd");
                            } else {
                                endTime = "";
                            }
                            bannerTime = startTime + "~" + endTime;
                            return bannerTime;
                        }
                    },
                    {data: "status"},
                    {data: "bannerPV"},
                    {data: "bannerUV"},
                ];
                table = initTables("/work/querBannerData.json", columns, null);

                // 初始化时间控件
                $('.form_datetime_start_self').datetimepicker({
                    language: 'zh-CN', //语言类型
                    weekStart: 1, // 一周从哪一天开始
                    // todayBtn: 1, // 当天日期按钮
                    autoclose: 1, // 选完时间后是否自动关闭
                    todayHighlight: 1, // 当天日期高亮
                    startView: 2,
                    forceParse: 0,
                    showMeridian: 1,
                    maxView: 4, // 最高显示到年份
                    minView: 2,
                    minuteStep: 1, // 分钟间隔为1
                    initialDate: new Date(), // 初始化当前日期
                    format: 'yyyy-mm-dd', // 时间格式
                    pickerPosition: 'bottom-right' // 选择框位置
                }).on('changeDate', function (ev) {
                    var starttime = $(".form_datetime_start_self").val();
                    $(".form_datetime_end_self").datetimepicker('setStartDate', starttime);
                    $(".form_datetime_start_self").datetimepicker('hide');
                    $(".form_datetime_end_self").val("");
                });
                $('.form_datetime_end_self').datetimepicker({
                    language: 'zh-CN', //语言类型
                    weekStart: 1, // 一周从哪一天开始
                    // todayBtn: 1, // 当天日期按钮
                    autoclose: 1, // 选完时间后是否自动关闭
                    todayHighlight: 1, // 当天日期高亮
                    startView: 2,
                    forceParse: 0,
                    showMeridian: 1,
                    maxView: 4, // 最高显示到年份
                    minView: 2,
                    minuteStep: 1, // 分钟间隔为1
                    initialDate: new Date(), // 初始化当前日期
                    format: 'yyyy-mm-dd', // 时间格式
                    pickerPosition: 'bottom-right' // 选择框位置
                }).on('changeDate', function (ev) {
                    var endtime = $(".form_datetime_end_self").val();
                    $(".form_datetime_start_self").datetimepicker('setEndDate', endtime);
                    $(".form_datetime_end_self").datetimepicker('hide');
                });
            });

            function explore() {
                var startTime = $('#startTime').val();
                var endTime = $('#endTime').val();
                var bannerId = $('#bannerId').val();
                var bannerName = $('#bannerName').val();
                var status = $('#status').val();
                var mallCode = $('#mallCode').val();
                window.location.href = "/work/exploreBannerData/?startTime=" + startTime + "&endTime=" + endTime + "&bannerId=" + bannerId + "&bannerName=" + bannerName + "&status=" + status + "&mallCode=" + mallCode;
            }

            // 重置
            function resetForm() {
                $('#filter_form').get(0).reset();
                $("#mallCode").select2("val", "-1");
            }
        </script>
    </section>
</div>
</body>
</html>